<template>
  <el-dialog
    title="案件督办"
    :visible.sync="dialogVisible"
    custom-class="custom-dialog"
    width="50%"
    :before-close="handleClose"
    @opened="initData"
  >
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form
          ref="form"
          class="query-more-form split-row"
          size="mini"
          label-width="85px"
          :model="dataForm"
          :rules="rules"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="督办意见" prop="opinion">
                <el-input
                  v-model="dataForm.opinion"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入督办意见"
                  maxlength="500"
                />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="常用意见">
                <el-select
                  class="w-100"
                  v-model="dataForm.nextUserId"
                  placeholder="请选择常用意见"
                  @visible-change="visibleChange"
                  @change="changeData"
                >
                  <el-option
                    :label="item.opinion"
                    :value="item.opinion"
                    v-for="(item, i) in userList"
                    :key="i"
                  ></el-option
                ></el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <div class="flex-start-center">
                <el-button size="mini" class="submit-btn" @click="handleSave()"
                  >确认</el-button
                >
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { roleDeptTreeselect } from "@/api/system/dept";
import { queryOpinionList } from "@/api/knowledgeBase.js";
import UploadFile from "@/components/UploadFile";
import { wfmCaseDistribute3, applySupervise } from "@/api/wfm/wfm.js";
import { handleList } from "@/api/user.js";
import { list as roleList } from "@/api/role.js";
export default {
  name: "DispatchDialog2",
  components: { UploadFile },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    caseCode: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      deptTreeLoading: false,
      deptTree: [],
      userList: [
        {
          userName: "及时和各部门沟通，快速高效的解决问题",
          userId: 1,
        },
        {
          userName: "尽快分发任务，通知到有关部门",
          userId: 2,
        },
      ],
      roleList: [],
      deptProps: {
        children: "children",
        label: "label",
      },
      tableData: [],
      fileList: "",
      expandedKeysDept: [],
      filterText: "",
      dataForm: {
        caseCode: "",
        opinion: "",
        planCompleteTime: "",
        nextDeptId: null,
        nextDeptName: "",
        nextRoleId: null,
        nextRoleName: "",
        nextUserId: "",
        nextUserName: "",
        attachments: [],
      },
      rules: {
        opinion: [
          { required: true, message: "请输入分发意见", trigger: "blur" },
        ],
        nextUserId: [
          { required: true, message: "请输入分发意见", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {},
  methods: {
    initData() {
      this.dataForm.caseCode = this.caseCode;
      this.deptTreeLoading = true;
      roleDeptTreeselect(1)
        .then((res) => {
          this.deptTree = res.depts;
          if (res.depts && res.depts.length > 0) {
            this.expandedKeysDept = res.depts.map((item) => item.id);
          }
          this.deptTreeLoading = false;
        })
        .catch(() => {
          this.deptTreeLoading = false;
        });
      roleList()
        .then((res) => {
          let { code, rows, total } = res;
          if (code == 200) {
            this.roleList = rows;
          }
        })
        .catch(() => {});

      this.getUserList();
    },

    // 查询推荐意见
    getUserList() {
      queryOpinionList()
        .then((res) => {
          this.userList = res.rows;
          if (res.rows.length > 0) {
            this.dataForm.opinion = res.rows[0].opinion;
          } else {
            this.dataForm.opinion = "希望加快速度处理问题";
          }
        })
        .catch();
    },
    changeData(val) {
      this.dataForm.opinion = val;
    },

    visibleChange(val) {
      if (val) {
        if (this.dataForm.nextDeptId === "") {
          this.$message.warning("请先选择常用意见");
        }
      }
    },
    handleClose() {
      this.$emit("closeDialog");
      this.clearData();
    },

    // 保存
    handleSave() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          applySupervise({
            caseCode: this.caseCode,
            content: this.dataForm.opinion,
          })
            .then((res) => {
              let { code } = res;
              if (code == 200) {
                this.$message.success("保存成功");
                // this.$router.push('/backlog/index')
                this.clearData();
                this.handleClose();
              }
            })
            .catch(() => {
              this.$message.error("保存失败");
            });
        }
      });
    },

    clearData() {
      this.dataForm = {
        caseCode: "",
        opinion: "",
        planCompleteTime: "",
        nextDeptId: null,
        nextDeptName: "",
        nextRoleId: null,
        nextRoleName: "",
        nextUserId: null,
        nextUserName: "",
      };
      this.$refs["form"].clearValidate();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
